<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="videoShow">
					<video class="videoShow" id="myVideo" :src="classInfo.fileListVideo[0].fileUrl"></video>
				</view>
				<view>
					<u-modal :showConfirmButton="false" title="提示" :content-slot="true" :show="showPayModal">
						<view class="slot-content">
							<view class="t-wrap">
								<view style="width: 410rpx; margin-left: 50rpx">{{ content }}</view>
								<view v-if="!isIOS" class="t-middle">年度和半年度会员可以免费收看学习</view>
								<view v-else class="t-middle">iOS用户暂不支持此服务，请联系您的专属服务管家</view>
							</view>
							<u-button v-if="!isIOS" text="去升级成为半年或年度会员" type="success" shape="circle"
								@click="onPayConfirm"></u-button>
							<u-button v-else text="iOS用户暂不支持此服务" type="warning" shape="circle" disabled></u-button>

							<view @tap="handleCancel" class="b-middle">下次再来</view>
						</view>
					</u-modal>
				</view>
				<view class="videoShowitem">
					<image src="../../static/imags/Time_(时间).png"></image>
					<view>{{ classInfo.fileListPic[0].createTime }}</view>
					<view>观看·{{ classInfo.viewCount }}</view>
					<!-- <image @tap="share" src="../../static/icon/Share.png"></image> -->
					<image v-if="classInfo.likeFlag == 0" @tap="handleLike" src="../../static/icon/Thumbs-up.png">
					</image>
					<view v-else>已赞</view>
				</view>
				<view class="check_tiem">
					<u-subsection :list="tabList" :current="curNow" @change="sectionChange"
						active-color="#19E820"></u-subsection>
				</view>
				<view class="fotter">
					<view class="jieshao" v-if="curNow == 0">
						<view>
							{{ classInfo.contentInfo }}
						</view>
						<image :src="classInfo.fileListPic[0].fileUrl"></image>
					</view>
					<view class="pinlun" v-else-if="curNow == 1">
						<view v-if="commentList.length > 0">
							<view class="p-wrap" v-for="(item, index) in commentList" :key="index">
								<view class="p-cover">
									<image :src="item.briefUserInfo.avatar" mode=""></image>
								</view>
								<view class="p-right">
									<view class="p-name">{{ item.briefUserInfo.nickName }}</view>
									<!-- <view class="p-time">12分钟前</view> -->
									<view class="p-content">{{ item.commentInfo }}</view>
									<view class="p-foot">
										<view style="display: flex" class="">
											<view class="p-data">{{ item.createTime }}</view>
											<view class="p-address">
												{{ item.briefUserInfo.province ? item.briefUserInfo.province : '未知' }}
											</view>
										</view>
										<view class="p-btn">回复</view>
									</view>
								</view>
							</view>
						</view>
						<u-empty v-else mode="list"></u-empty>
						<view class="p-input">
							<u--input v-model="conmment" shape="circle" placeholder="请输入内容" clearable></u--input>
							<button @tap="handleSend" type="primary">发送</button>
						</view>
					</view>
					<view class="dianzan" v-else>
						<view v-if="likeList.length > 0">
							<view class="p-wrap" v-for="item in likeList">
								<view class="p-cover">
									<image :src="item.avatar" mode=""></image>
								</view>
								<view class="p-right">
									<view class="p-name">{{ item.nickName }}</view>
									<view class="p-foot">
										<view style="display: flex" class="">
											<view class="p-data">{{ item.customDate }}</view>
											<view class="p-address">{{ item.province ? item.province : '未知' }}</view>
										</view>
										<!-- <view class="p-btn">回复</view> -->
									</view>
								</view>
							</view>
						</view>
						<u-empty v-else mode="list"></u-empty>
						<!-- 					<uni-list>
							<uni-list-chat v-for="(item, index) in Data" :avatar-list="item.url" :title="item.name" :note="item.note" :key="index" showArrow></uni-list-chat>
						</uni-list> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
const api = require('../../util/api.js');
export default {
	components: {
		CustomNavbarTwo
	},
	data() {
		return {
			conmment: '',
			classInfo: {},
			pageTitle: '废纸学堂详情页',
			showSex: false,
			videoList: [{
				url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
				title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
			}],
			tabList: ['介绍', '评论(5)', '点赞(999)'],
			curNow: 0,
			Data: [{
				name: '123456',
				url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				note: '09-12 00:34 浙江'
			}, {
				name: '123456',
				url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				note: '09-12 00:34 浙江'
			}, {
				name: '123456',
				url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				note: '09-12 00:34 浙江'
			}],
			isPlay: false,
			showPayModal: true,
			watch: false,
			content: '学习内容定时更新，随到随学',
			commentList: [],
			likeList: [],
			classId: '',
			isIOS: false // 新增是否iOS平台标志
		};
	},
	onLoad(options) {
		// 新增平台判断
		this.isIOS = uni.getSystemInfoSync().platform === 'ios';
		this.classId = options.id;
		this.getInfo(options.id);
		this.getVip();
		this.getCommentLst();
		this.getLikeList();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '找纸塑网一废纸废塑料AI获客平台', //分享的名称
			path: '/pages/zhuanqu/index',
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		}
	},
	methods: {
		//点赞
		handleLike() {
			this.$https.post(this.$api.getCourseLike, {
				pubInfoId: this.classId,
				operateType: 3,
				processType: 1
			}).then((res) => {
				if (res.code === 200) {
					uni.showToast({
						title: '点赞成功',
						icon: 'success'
					});
					this.getInfo(options.id);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		//判断是不是会员
		getVip() {
			this.$https.get(this.$api.getInfo).then((res) => {
				if (res.code === 200) {
					if (res.data.pubInfoUserInfo.vipType == 0) {
						this.showPayModal = false;
					} else {
						this.showPayModal = false;
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		//获取信息
		getInfo(id) {
			this.$https.post(this.$api.getClassDetail, {
				id: id
			}).then((res) => {
				if (res.code === 200) {
					console.log(res);
					this.classInfo = res.data;
					this.tabList = ['介绍', '评论' + '(' + res.data.commentCount + ')', '点赞' + '(' + res.data
						.likeCount + ')'
					];
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		sectionChange(index) {
			this.curNow = index;
		},
		handleCancel() {
			uni.navigateBack({
				delta: 1 // 返回的页面层级，1表示返回上一页
			});
		},
		//获取评论
		getCommentLst() {
			this.$https.post(this.$api.getCourseDetailComment, {
				courseDetailId: this.classId
			}).then((res) => {
				if (res.code === 200) {
					console.log(res, 666);
					this.commentList = res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		//点赞列表
		getLikeList() {
			this.$https.post(this.$api.getCourseLikeList, {
				id: this.classId
			}).then((res) => {
				if (res.code === 200) {
					this.likeList = res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		//发生评论
		handleSend() {
			if (!this.conmment) {
				return uni.showToast({
					title: '请输入评论消息',
					icon: 'none'
				});
			}
			console.log(this.conmment);
			this.$https.post(this.$api.getAddComment, {
				parentId: '',
				commentInfo: this.conmment,
				courseDetailId: this.classInfo.id
			}).then((res) => {
				if (res.code === 200) {
					console.log(res, 666);
					uni.showToast({
						title: '评论成功',
						icon: 'success'
					});
					this.conmment = '';
					this.getCommentLst();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		// 点击自定义播放按钮
		onCustomPlay() {
			if (!this.hasPaid) {
				// 显示支付弹框
				this.showPayModal = true;
			} else {
				// 已支付，直接播放视频
				this.playVideo();
			}
		},
		// 支付确认
		onPayConfirm() {
			uni.navigateTo({
				url: `/page/kaitonghuiyuan/index`
			});
			// 模拟支付逻辑
			// this.showPayModal = false;
			// this.hasPaid = true;
			// this.watch = true;
			// // 支付完成后自动播放视频
			// this.playVideo();
		},
		// 支付取消
		onPayCancel() {
			this.showPayModal = false;
		},
		// 控制视频播放
		playVideo() {
			const video = this.$refs.myVideo;
			if (video) {
				video.play();
			}
		},
		// 视频播放事件回调（可选）
		onVideoPlay() {
			console.log('视频开始播放');
		}
	}
};
</script>
<style lang="scss" scoped>
.my_container {
	width: 100%;

	.my_container_body {
		width: 750rpx;
		background: linear-gradient(180deg, #ddffde 0%, #ffffff 29%, #ffffff 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		height: 100%;

		.my_container_body_head {
			width: 686rpx;
			height: 194rpx;
		}

		.my_container_body_body {
			width: 686rpx;
			margin-left: 32rpx;

			.videoShow {
				width: 686rpx;
				height: 380rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}

			.t-wrap {
				text-align: center;

				.t-middle {
					margin-top: 30rpx;
					height: 116rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 36rpx;
					color: #ff4400;
					line-height: 58rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}

			.b-middle {
				margin-top: 10rpx;
				text-align: center;
				font-size: 24rpx;
				text-decoration: underline;
			}

			.custom-play-button {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				padding: 10px 20px;
				border-radius: 5px;
				cursor: pointer;
			}

			.pay-modal {
				position: fixed;
				top: 25%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #fff;
				padding: 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				z-index: 20;
			}

			.pay-modal .buttons {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
			}

			.videoShowitem {
				height: 38rpx;
				display: flex;
				margin-top: 24rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				height: 38rpx;
				line-height: 38rpx;

				image {
					width: 38rpx;
					height: 38rpx;
				}

				:nth-child(2) {
					width: 250rpx;
					margin-left: 4rpx;
				}

				:nth-child(3) {
					width: 200rpx;
					margin-left: 30rpx;
				}

				:nth-child(4) {
					margin-left: 80rpx;
				}

				:nth-child(5) {
					margin-left: 30rpx;
					// margin-left: 200rpx;
				}
			}

			.check_tiem {
				width: 686rpx;
				margin-top: 34rpx;
			}

			.fotter {
				margin-top: 12rpx;

				.jieshao {
					width: 686rpx;

					view {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 50rpx;
						text-align: left;
					}

					image {
						width: 686rpx;
						height: 240rpx;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						margin-top: 24rpx;
					}
				}

				.pinlun {
					padding-bottom: 240rpx;

					.p-wrap {
						margin-top: 40rpx;
						display: flex;

						.p-cover {
							width: 60rpx;
							height: 60rpx;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}
						}

						.p-right {
							margin-left: 6rpx;
							flex: 1;

							.p-name {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 28rpx;
								color: #333333;
								font-style: normal;
								text-transform: none;
							}

							.p-time {
								margin: 6rpx 0;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-size: 20rpx;
								color: #777777;
							}

							.p-content {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 16rpx;
							}

							.p-foot {
								display: flex;
								justify-content: space-between;

								.p-data {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-address {
									margin-left: 14rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-btn {
									justify-content: flex-end;
									width: 50rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #19e820;
								}
							}
						}
					}

					.p-input {
						background-color: #fff;
						bottom: 0rpx;
						padding-bottom: 50rpx;
						position: fixed;
						display: flex;

						::v-deep .u-input {
							width: 512rpx;
						}

						button {
							font-size: 30rpx;
							margin-left: 20rpx;
							width: 148rpx;
							height: 80rpx;
							background: #1ee825;
							border-radius: 112rpx 112rpx 112rpx 112rpx;
						}
					}
				}

				.dianzan {
					padding-bottom: 60rpx;

					// .chat-custom-text {
					// 	width: 36rpx;
					// 	height: 36rpx;
					// }
					.p-wrap {
						margin-top: 40rpx;
						display: flex;

						.p-cover {
							width: 60rpx;
							height: 60rpx;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}
						}

						.p-right {
							margin-left: 6rpx;
							flex: 1;

							.p-name {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 28rpx;
								color: #333333;
								font-style: normal;
								text-transform: none;
							}

							.p-time {
								margin: 6rpx 0;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-size: 20rpx;
								color: #777777;
							}

							.p-content {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 16rpx;
							}

							.p-foot {
								display: flex;
								justify-content: space-between;

								.p-data {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-address {
									margin-left: 14rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-btn {
									justify-content: flex-end;
									width: 50rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #19e820;
								}
							}
						}
					}
				}
			}
		}
	}

	/* 可以添加一个禁用状态的样式 */
	.u-button[disabled] {
		opacity: 0.6;
	}
}
</style>